/*
 * @Author: your name
 * @Date: 2020-07-28 21:42:38
 * @LastEditTime: 2020-07-28 22:48:59
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \react-hooks-app\src\compontent\useContextDemo.js
 */


import React,{useState,useEffect,createContext} from 'react'

import {CountContext} from '../context'
import ContextChild from './contextChild'
//const CountContext = createContext({});
import UserReducerDemo from './useReucerDemo';

function UserContextDemo(){

  let [conunt,setCount] = useState(0)
  let [effectUpdate,seteffectUpdate] = useState(1)
  useEffect(()=>{
    console.log('useEffect')
    return ()=>{
      console.log('清空上一次的副作用')
    }
  },[effectUpdate])

  function addCount(){
    setCount(conunt+1)
  }
  return (
    <div>
          <p>you clied {conunt} times</p>
          <button onClick={()=>{setCount(conunt+1)}}>点击</button>

          {/* 这个值更新的时候 会触发 useEffect*/}
          <p>会更新useEffect {effectUpdate} times</p>
          <button onClick={()=>{seteffectUpdate(effectUpdate+1)}}>点击</button>
          <hr></hr>
          <CountContext.Provider value={{count:conunt,name:'yiu',addCount:addCount}}>
              <h1>Context 子组件</h1>
              <ContextChild></ContextChild>
              <hr></hr>
              <h1>reducer demo</h1>
              <UserReducerDemo></UserReducerDemo>
          </CountContext.Provider>
     </div>
  )
}


export default UserContextDemo;
